<!--
	This file is part of ELCube.
	ELCube is free software: you can redistribute it and/or modify
	it under the terms of the GNU Affero General Public License as published by
	the Free Software Foundation, either version 3 of the License, or
	(at your option) any later version.
	ELCube is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
	GNU Affero General Public License for more details.
	You should have received a copy of the GNU Affero General Public License
	along with ELCube.  If not, see <https://www.gnu.org/licenses/>.
-->
<template>
  <nk-def-card>
    <nk-form :col="1" :edit="editMode">
      <nk-form-item title="先决条件" :width="140">
        {{def.preconditionSpEL}}
        <nk-sp-el-editor slot="edit" v-model="def.preconditionSpEL" style="max-width:300px;"></nk-sp-el-editor>
      </nk-form-item>
      <nk-form-item title="并行模式" :width="140">
        {{def.parallel}}
        <a-switch slot="edit" size="small" v-model="def.parallel"></a-switch>
      </nk-form-item>
      <nk-form-item title="返回接口结果" :width="140">
        {{def.resultSpEL}}
        <nk-sp-el-template-editor slot="edit" v-model="def.resultSpEL" style="max-width:300px;"></nk-sp-el-template-editor>
      </nk-form-item>
    </nk-form>

    <vxe-toolbar v-if="editMode">
      <template v-slot:buttons>
        <vxe-button icon="fa fa-plus" status="perfect" size="mini" @click="xTableAdd()">新增</vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-table
            ref="xTable"
            row-key
            auto-resize
            keep-source
            resizable
            size="mini"
            border=inner
            :data="def.services"
            :edit-config="{trigger: 'click', mode: 'row', showIcon: editMode, showStatus: true,activeMethod}">
      <vxe-column field="key"          width="8%"  title="KEY" :edit-render="{name: '$input',props: {type: 'text',maxlength:16}}"></vxe-column>
      <vxe-column field="invokeSpEL"   width="30%" title="调用" :edit-render="{}">
        <template v-slot:edit="{row}">
          <nk-sp-el-editor slot="edit" v-model="row.invokeSpEL"></nk-sp-el-editor>
        </template>
      </vxe-column>
      <vxe-column field="desc"         width="20%" title="描述" :edit-render="{name: '$input',props: {type: 'text',maxlength:16}}"></vxe-column>
      <vxe-column field="preconditionSpEL" width="14%" title="条件" :edit-render="{}">
        <template v-slot:edit="{row}">
          <nk-sp-el-editor slot="edit" v-model="row.preconditionSpEL"></nk-sp-el-editor>
        </template>
      </vxe-column>
      <vxe-column field="mappingSpEL"  width="18%" title="映射" :edit-render="{name: '$input',props: {type: 'text',maxlength:16}}">
        <template v-slot:edit="{row}">
          <nk-sp-el-template-editor slot="edit" v-model="row.mappingSpEL"></nk-sp-el-template-editor>
        </template>
      </vxe-column>
      <vxe-column >
        <template v-slot="{seq,items}">
          <span v-if="editMode" class="drag-btn" style="margin-right: 10px;">
            <a-icon type="swap" :rotate="90" />
          </span>
          <span v-if="editMode" style="margin-right: 10px;" @click="$nkSortableRemove(def.services,seq)">
            <a-icon type="delete" />
          </span>
        </template>
      </vxe-column>
    </vxe-table>

  </nk-def-card>
</template>

<script>
  import MixinDef from "MixinDef";
  import MixinSortable from "MixinSortable";

  export default {
    mixins:[new MixinDef({services:[]}),MixinSortable()],
    computed:{
    },
    created() {
      this.$nkSortableVxeTable(true);
    },
    methods:{
      activeMethod(){return this.editMode;},
      xTableAdd(){
        if(!this.def.services){
          this.$set(this.def,'services',[]);
        }
        const row = {};
        this.def.services.push(row);
        this.$refs.xTable.setActiveRow(row);
      }
    }
  }
</script>

<style scoped>

</style>